<template>
<div class="app-container">
  <el-form :model="form" >
    <el-row>
      <div class="demo-input-suffix">
        管理员姓名：
        <el-input v-model="form.name" placeholder="输入管理员姓名"></el-input>
        电话号码：
        <el-input v-model="form.tel" placeholder="输入管理员电话"></el-input>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="info" @click="">重制</el-button>
      </div>
    </el-row>
    <el-row>
      <div class="demo-input-suffix">
        账号状态：
        <el-select v-model="form.state" @change="" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="有效" value="1"></el-option>
          <el-option label="失效" value="2"></el-option>
        </el-select>
        <el-button type="primary" @click="onSubmit" plain>添加角色名称</el-button>
        <el-button type="primary" @click="adminAdd" plain>添加子管理员账号</el-button>
      </div>
    </el-row>
  </el-form>
  <el-table :data="tableData" id="out-table">
    <el-table-column type="selection" align="center"></el-table-column>
    <el-table-column type="index" align="center"></el-table-column>
    <el-table-column
      v-for="item in tableList"
      :key="item._id"
      :prop="item.value"
      :label="item.name"
      align="center">
    </el-table-column>
    <el-table-column label="操作" align="center" width="200">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          v-if="scope.row.state == '有效'"
          @click="reChange(scope.$index,2)">禁用</el-button>
        <el-button
          size="mini"
          type="primary"
          v-if="scope.row.state == '失效'"
          @click="reChange(scope.$index,1)">启用</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals">
    </el-pagination>
    <el-button class="upload" @click="exportExcel">导出excal
    </el-button>
  </div>
</div>

</template>

<script>
  import request from '@/utils/request'
  import { formatDate,toUnix,toDate } from '@/utils/index'
  import { validateOrderStatus,Excel } from '@/utils/validate'
  export function getList(mes) {
    return request({
      url: '/v1/admin/admin/list',
      method: 'post',
      data: mes
    })
  }
  export function turn(mes) {
    return request({
      url: '/v1/admin/admin/update',
      method: 'post',
      data: mes
    })
  }
  export default {
    inject: ['reload'],
    created:function(){
      const token = JSON.parse(localStorage.getItem('admin'))
      console.log(token);
      this.token = token
      const obj = {
        page: 1,
        size: 10,
        token: token
      }
      console.log(obj);
      this.getMes(obj)
    },
    methods: {
      getMes(item) {
        getList(item).then(res => {
          if (res.code === 200) {
            console.log(item);
            if (res.data.list.length) {
              this.setTableData = res.data.list
              console.log(res);
              this.totals = res.data.totalNumber
              res.data.list.map(item => {
                const val = {
                  phone: item.phone,
                  name: item.role,
                  aName: item.fullname,
                  cTime: item.create_time ? formatDate(new Date(item.create_time*1000), 'yyyy-MM-dd hh:mm') : '无',
                  state: this.state(item.status),
                  _id: item._id
                }
                this.tableData.push(val)
              })
            }
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          });
        })
      },
      handleSizeChange(val) {
        this.tableData = []
        let obj = {
          size: val,
          page: 1
        }
        this.getMes(obj)
        this.size = val
      },
      handleCurrentChange(page) {
        this.tableData = []
        let obj = {
          page: page,
          size: this.size
        }
        this.getMes(obj)
      },
      onSubmit() {
        this.tableData = []
        const item = {
          page: 1,
          size: this.size,
          status: this.form.state,
          phone: this.form.tel,
          fullname: this.form.fullname,
          token: this.token
        }
        this.getMes(item)
      },
      exportExcel() {
        Excel('#out-table')
      },
      change(item) {
        turn(item).then(res => {
          if (res.code === 200) {
            console.log(res);
            this.reload()
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          });
        })
      },
      reChange(index,i) {
        const item = {
          token: this.token,
          _id: this.tableData[index]._id,
          status: i
        }
        this.change(item)
      },
      adminAdd() {
        this.$router.push({
          path: '/admin/adminAdd'
        })
      },
      state(str) {
        var obj = ''
        switch (str) {
          case 1:
            obj = '有效'
            break
          case 2:
            obj = '失效'
            break
          default:
        }
        return obj
      }
    },
    filters: {
      isStart: function(value) {
        if (!value || value == '') return '订单详情'
        return value
      }
    },
    data() {
      return {
        form: {
          type: '',
          date1: '',
          date2: '',
          title: '',
          type1: '',
          type2: '',
          state: ''
        },
        tableList: [
          { name: '管理员账号', value: 'phone' },
          { name: '角色名称', value: 'name' },
          { name: '管理员姓名', value: 'aName' },
          { name: '账号开通时间', value: 'cTime' },
          { name: '账号状态', value: 'state' }
        ],
        optionsOneId: [],
        optionsTwoId: [],
        tableData: [],
        currentPage: 1,
        totals: 0,
        size: 10,
        token: ''
      }
    }
  }
</script>
<style scoped>
  .el-col{
    margin: 5px;
  }
  .el-row{
    margin: 10px 0;
  }
  .demo-input-suffix div{
    margin-right: 10px;
  }
  .el-table{
    margin-bottom: 10px;
  }
  .upload{
    float: right;
  }
  .el-input{
    width: 200px;
  }
  .block{
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
</style>
